<template>
	<view class="container">
		<!-- 管理页面头部 -->
		<view class="admin-header">
			<text class="header-title">管理后台</text>
			<text class="header-subtitle">管理员功能面板</text>
		</view>

		<!-- 管理功能列表 -->
		<view class="admin-functions">
			<view class="function-item" @click="navigateToFunction('users')">
				<view class="function-icon">
					<text class="icon-text">👥</text>
				</view>
				<view class="function-info">
					<text class="function-title">用户管理</text>
					<text class="function-desc">管理学生和家长信息</text>
				</view>
				<text class="function-arrow">></text>
			</view>

			<view class="function-item" @click="navigateToFunction('courses')">
				<view class="function-icon">
					<text class="icon-text">📚</text>
				</view>
				<view class="function-info">
					<text class="function-title">课程管理</text>
					<text class="function-desc">管理课程安排和内容</text>
				</view>
				<text class="function-arrow">></text>
			</view>

			<view class="function-item" @click="navigateToFunction('bookings')">
				<view class="function-icon">
					<text class="icon-text">📅</text>
				</view>
				<view class="function-info">
					<text class="function-title">预约管理</text>
					<text class="function-desc">管理学生预约申请</text>
				</view>
				<text class="function-arrow">></text>
			</view>

			<view class="function-item" @click="navigateToFunction('hours')">
				<view class="function-icon">
					<text class="icon-text">⏰</text>
				</view>
				<view class="function-info">
					<text class="function-title">课时管理</text>
					<text class="function-desc">管理学生课时余额</text>
				</view>
				<text class="function-arrow">></text>
			</view>

			<view class="function-item" @click="navigateToFunction('statistics')">
				<view class="function-icon">
					<text class="icon-text">📊</text>
				</view>
				<view class="function-info">
					<text class="function-title">数据统计</text>
					<text class="function-desc">查看运营数据分析</text>
				</view>
				<text class="function-arrow">></text>
			</view>

			<view class="function-item" @click="navigateToFunction('settings')">
				<view class="function-icon">
					<text class="icon-text">⚙️</text>
				</view>
				<view class="function-info">
					<text class="function-title">系统设置</text>
					<text class="function-desc">管理系统配置</text>
				</view>
				<text class="function-arrow">></text>
			</view>
		</view>

		<!-- 快速统计 -->
		<view class="quick-stats">
			<view class="stats-header">
				<text class="stats-title">快速统计</text>
			</view>
			<view class="stats-grid">
				<view class="stats-item">
					<text class="stats-number">{{ stats.totalUsers }}</text>
					<text class="stats-label">总用户数</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">{{ stats.todayBookings }}</text>
					<text class="stats-label">今日预约</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">{{ stats.pendingBookings }}</text>
					<text class="stats-label">待处理</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			stats: {
				totalUsers: 156,
				todayBookings: 23,
				pendingBookings: 8
			}
		}
	},
	onLoad() {
		// 检查管理员权限
		this.checkAdminPermission()
	},
	methods: {
		checkAdminPermission() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo || userInfo.role !== 1) {
				uni.showToast({
					title: '无权限访问',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		},
		
		navigateToFunction(functionName) {
			uni.showToast({
				title: `${functionName}功能开发中`,
				icon: 'none'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #0B0F1A;
	padding: 40rpx;
}

.admin-header {
	text-align: center;
	margin-bottom: 60rpx;
	
	.header-title {
		display: block;
		font-size: 48rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 16rpx;
	}
	
	.header-subtitle {
		font-size: 28rpx;
		color: #AAB4BE;
	}
}

.admin-functions {
	margin-bottom: 60rpx;
}

.function-item {
	background: #1a1f2e;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	border: 1rpx solid #2a2f3e;
	
	.function-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		
		.icon-text {
			font-size: 36rpx;
		}
	}
	
	.function-info {
		flex: 1;
		
		.function-title {
			display: block;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 500;
			margin-bottom: 8rpx;
		}
		
		.function-desc {
			font-size: 26rpx;
			color: #AAB4BE;
		}
	}
	
	.function-arrow {
		font-size: 32rpx;
		color: #AAB4BE;
	}
}

.quick-stats {
	background: #1a1f2e;
	border-radius: 16rpx;
	padding: 30rpx;
	border: 1rpx solid #2a2f3e;
	
	.stats-header {
		margin-bottom: 30rpx;
		
		.stats-title {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 500;
		}
	}
	
	.stats-grid {
		display: flex;
		justify-content: space-between;
	}
	
	.stats-item {
		text-align: center;
		flex: 1;
		
		.stats-number {
			display: block;
			font-size: 48rpx;
			color: #00B8D4;
			font-weight: bold;
			margin-bottom: 8rpx;
		}
		
		.stats-label {
			font-size: 26rpx;
			color: #AAB4BE;
		}
	}
}
</style> 